<script setup lang="ts">
import { onMounted, ref } from 'vue'
const value = ref('')





const cities = [
    {
        value: './flag/china.svg',
        label: '中文',
        id: 1
    },
    {
        value: './flag/us.svg',
        label: 'English',
        id: 2
    },
    {
        value: './flag/japan.svg',
        label: '日本語',
        id: 3
    },
    {
        value: './flag/china.svg',
        label: '中文（繁體）',
        id: 4
    },
    {
        value: './flag/korean.svg',
        label: '한국어',
        id: 5
    }
]


</script>
    
<template>
    <el-select v-model="value" placeholder="中文" :filterable="true" :default-first-option="true" effect="dark">
        <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.id">
            <span style="float: left">{{ item.label }}</span>
            <!-- <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{ item.value }}</span> -->
            <img :src="item.value" alt="">
        </el-option>
    </el-select>
</template>
    
<style scoped lang="scss">
:deep(.el-input__wrapper){
    background-color: #e3edf7;
    box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
        -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}

:deep(.el-input__inner){
    // background-color: red;
}
img {
    margin-left: 20px;
    width: 50px;
    height: 25px;
}
</style>